<template>
  <div class="container-setting">
      <el-card>
          <div slot="header">
              <my-bread>个人设置</my-bread>
          </div>
          <!-- 内容 栅格布局-->
                    <el-row>
              <el-col :span="12">
                  <!-- 表单 -->
                  <el-form label-width="120px">
                      <el-form-item label="编号 :">{{user.id}}</el-form-item>
                      <el-form-item label="手机 :">{{user.mobile}}</el-form-item>
                      <el-form-item label="媒体名称 :">
                          <el-input  v-model="user.name" placeholder="请输入名称"></el-input>
                      </el-form-item>
                      <el-form-item label="媒体介绍 :">
                          <el-input v-model="user.intro" :rows="3" type="textarea" placeholder="请输入媒体介绍"></el-input>
                      </el-form-item>
                      <el-form-item label="邮箱 :">
                          <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
                      </el-form-item>
                      <el-form-item>
                          <el-button @click="saveSetting()" type="primary">保存设置</el-button>
                      </el-form-item>                   
                  </el-form>
              </el-col>
              <el-col :span="12">
                  <!--上传 头像 -->
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadAvatar"
                    :show-file-list="false">
                    <img v-if="this.user.photo" :src="this.user.photo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <p class="text">修改头像</p>
              </el-col>

          </el-row>
         
      </el-card>
  </div>
</template>

<script>
import eventBus from '@/eventBus'
import auth from '@/utils/auth'
export default {
    
    name:'page-setting',
    data(){
        return {
            //用户信息
            user : {
                name:'',
                intro:'',
                email:'',
                photo:'',
                mobile:''
            },
        }
    },
    created(){
        this.getprofile()
    },
    methods:{
        //选择图片后触发
        async uploadAvatar ({file}) {
            // console.log(infoObj) === {file:File就是图片文件对象}; 
            //图片对应的file对象
            //实例化 formdata 对象
            try{
                const formdata = new FormData()
                formdata.append('photo',file)
                //自己通过axios上传图片
                const res =await  this.$http.patch('user/photo',formdata)
                this.$message.success('修改头像成功')
                //预览
                this.user.photo= res.data.data.photo
                //同步头像到Layout
                eventBus.$emit('updateUserPhoto',this.user.photo)
                //同步头像到本地
                const localUser = auth.getUser()
                //修改信息
                localUser.photo = this.user.photo 
                //保存信息
                auth.setUser(localUser)
            }catch(e){
                this.$message.error('修改头像失败')
            }

        },
        //保存设置
        async saveSetting(){
            try{
                //获取编辑的时候需要三个字段
                const {name,intro ,email} = this.user
                //发起编辑请求
                await this.$http.patch('user/profile',{name,intro ,email})
                //编辑资料成功
                this.$message.success('保存设置成功')
                // 同步用户名称给Layout组件--传递
                eventBus.$emit('updateUserName',name)
                // 同步用户名称给本地存储
                //获取信息
                const localUser = auth.getUser()
                //修改信息
                localUser.name = name 
                //保存信息
                auth.setUser(localUser)
            }catch(e){
                if(e.response && e.response.status === 409){
                    this.$message.error('媒体名称已存在');
                    
                }else{
                    this.$message.error('保存设置失败')
                }
            }
        },
        async getprofile(){
           const res = await this.$http.get('user/profile',{params:this.user})
            console.log(res.data);
            this.user=res.data.data
            this.user.photo=res.data.data.photo    
        }
    }
}
</script>

<style scoped lang='less'>
.text {
    font-size: 12px;
    text-align: center;
}
::v-deep .avatar-uploader .el-upload{
    margin-left: 180px;
}

</style>